<template>
	<sl-report>
		<template #title>
			<vxe-toolbar ref="toolbarRef" custom export print refresh size="mini"></vxe-toolbar>
		</template>
		<template #body="{h}">
			<vxe-table
				ref="tableRef"
				:checkbox-config="{labelField: 'id', highlight: true, range: true}"
				:column-config="{resizable: true}"
				:data="tableData"
				:height="h"
				:loading="loading"
				:print-config="{}"
				:sort-config="{multiple: true, trigger: 'cell'}"
				:row-config="{isHover: true}"
				@sort-change="sortChangeEvent"
				border
				size="small"
				stripe>
				<vxe-column type="seq" width="60"></vxe-column>
				<vxe-column title="ID" type="checkbox" width="140"></vxe-column>
				<vxe-column field="name" sortable title="Name"></vxe-column>
				<vxe-column :filter-multiple="false" :filters="sexOptions" :formatter="formatterSex" field="sex"
							title="Sex"></vxe-column>
				<vxe-column :filter-method="filterAgeMethod" :filters="ageOptions" field="age" sortable
							title="Age"></vxe-column>
				<vxe-column field="address" show-overflow title="Address"></vxe-column>
			</vxe-table>
		</template>
	</sl-report>
</template>
<script>

import SlReport from "@/components/sl-report.vue";

export default {
	components: {SlReport},
	data() {
		return {
			loading: false,
			tableData: [],
			sexOptions: [
				{label: '女', value: '0'},
				{label: '男', value: '1'}
			],
			ageOptions: [
				{label: '大于16岁', value: 16},
				{label: '大于26岁', value: 26},
				{label: '大于30岁', value: 30}
			],
		}
	},
	created() {
		this.loading = true
		setTimeout(() => {
			this.tableData = [
				{id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc'},
				{id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou'},
				{id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai'},
				{id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'test abc'},
				{id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai'},
				{id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc'},
				{id: 10007, name: 'Test7', role: 'Test', sex: '0', age: 29, address: 'test abc'},
				{id: 10008, name: 'Test8', role: 'Develop', sex: '0', age: 35, address: 'test abc'},
				{id: 10009, name: 'Test9', role: 'Test', sex: '1', age: 21, address: 'test abc'},
				{id: 10010, name: 'Test10', role: 'Develop', sex: '0', age: 28, address: 'test abc'},
				{id: 10011, name: 'Test11', role: 'Test', sex: '0', age: 29, address: 'test abc'},
				{id: 10012, name: 'Test12', role: 'Develop', sex: '1', age: 27, address: 'test abc'},
				{id: 10013, name: 'Test13', role: 'Test', sex: '0', age: 24, address: 'test abc'},
				{id: 10014, name: 'Test14', role: 'Develop', sex: '1', age: 34, address: 'test abc'},
				{id: 10015, name: 'Test15', role: 'Test', sex: '1', age: 21, address: 'test abc'},
				{id: 10016, name: 'Test16', role: 'Develop', sex: '0', age: 20, address: 'test abc'},
				{id: 10017, name: 'Test17', role: 'Test', sex: '1', age: 31, address: 'test abc'},
				{id: 10018, name: 'Test18', role: 'Develop', sex: '0', age: 32, address: 'test abc'},
				{id: 10019, name: 'Test19', role: 'Test', sex: '1', age: 37, address: 'test abc'},
				{id: 10020, name: 'Test20', role: 'Develop', sex: '1', age: 41, address: 'test abc'}
			]
			this.loading = false
		}, 500)
	},
	mounted() {
		// 将表格和工具栏进行关联
		const $table = this.$refs.tableRef
		const $toolbar = this.$refs.toolbarRef
		if ($table && $toolbar) {
			$table.connect($toolbar)
		}
	},
	methods: {
		sortChangeEvent ({ sortList }) {
			console.info(sortList.map((item) => `按照${item.field},${item.order}排序`).join('; '))
		},
		formatterSex({cellValue}) {
			let item = this.sexOptions.find(item => item.value === cellValue)
			return item ? item.label : ''
		},
		filterAgeMethod({value, row, column}) {
			return row.age >= value
		}
	}
}

</script>

<style scoped>

</style>